<template>
  <div class="filter">
    <div class="uploadBtn" v-if="localTypeUnit == 1">
      <el-select
        v-model="typeUnit"
        class="m-2"
        placeholder="请选择上传单位"
        size="large"
        style="width: 160px"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>

    <div class="uploadBtn">
      <el-date-picker
        v-model="dateStartTime"
        type="date"
        size="large"
        :disabled-date="disabledDate1"
        style="width: 160px"
      />
    </div>
    <div class="uploadBtn" style="line-height: 38rem">至</div>
    <div class="uploadBtn">
      <el-date-picker
        v-model="dateEndTime"
        type="date"
        size="large"
        :disabled-date="disabledDate2"
        style="width: 160px"
      />
    </div>
    <!-- <div class="uploadBtn">
            <el-date-picker v-model="timeDate" type="daterange" range-separator="至" start-placeholder="开始时间"
                end-placeholder="结束时间" size="large" />
        </div> -->
    <div class="uploadBtn">
      <el-button size="large" type="primary" @click="search">查询</el-button>
    </div>
    <div class="uploadBtn">
      <el-button size="large" type="" @click="exportDataList">导出</el-button>
    </div>
    <div class="uploadBtn">
      <el-button size="large" type="" @click="uploadFile">文件上传</el-button>
    </div>
    <div class="uploadBtn">
      <el-button size="large" type="" @click="filling">手工填报</el-button>
    </div>
  </div>
  <el-table
    :data="getValues"
    :show-header="false"
    border
    :span-method="objectSpanMethod"
    ref="tableList"
    size="small"
  >
    <el-table-column prop="title" label="" :width="70" fixed="" align="center">
      <template #default="scope">
        <span>{{ identifyResultList[scope.$index].title }}</span>
      </template>
    </el-table-column>
    <el-table-column
      v-for="(item, index) in getHeaders"
      :key="index"
      :prop="item"
      :fixed="index == 0"
      :width="index < 1 ? 50 : index > resultList.length - 7 ? 74 : 58"
      align="center"
    >
      <template #default="scope">
        <span>{{ scope.row[item] || "-" }}</span>
        <!-- <el-input v-else-if="index > 0 && index < resultList.length - 6" v-model="scope.row[item]" size="small"
                    @blur="blurFn(index, scope.$index, scope.row[item])" @focus="focusFn(index, scope.$index)"
                    :disabled="isNoEdit()" /> -->
        <!-- {{ index }}{{ scope.$index }} {{ scope.row[item] }} -->
      </template>
    </el-table-column>
  </el-table>
  <div class="chart">
    <div
      class="settingSta"
      v-if="
        chartTypeModel !== 'treatedWaterQuantity' &&
        chartTypeModel !== 'overflowsSewage'
      "
    >
      <span style="margin-right: 10px">标准线</span>
      <el-input
        v-model="input"
        :type="'number'"
        style="width: 60px; margin-right: 10px"
        size="large"
      />
      <span style="margin-right: 10px">~</span>
      <el-input
        v-model="input2"
        :type="'number'"
        style="width: 60px; margin-right: 10px"
        size="large"
      />
      <!-- <el-button size="large" type="primary" @click="setting">设置</el-button> -->
    </div>
    <el-select
      v-model="chartTypeModel"
      class="m-2"
      placeholder="请选择上传单位"
      size="large"
      style="width: 160px"
      @change="chartTypeModelChange"
    >
      <el-option
        v-for="item in chartTypeList"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <chart-line-bar
      :chartData="chartList"
      xAxisName="date"
      :title="`化验数据图`"
      :option="option"
      :chartType="chartTypeItem"
      :twoYAxis="false"
      :markValue="input"
      :markValue2="input2"
      :unit="unit"
      ref="assayChart"
      :orient="'horizontal'"
    ></chart-line-bar>
  </div>

  <el-dialog v-model="uploadVisible" :title="dialogTitle" width="60%">
    <el-scrollbar class="containRouter">
      <UploadFile :type="uploadType" viewType="2"></UploadFile>
    </el-scrollbar>
  </el-dialog>
  <el-dialog v-model="fillingVisible" title="手工填报" width="80%">
    <el-scrollbar class="containRouter">
      <AssayFill
        :fillTypeUnit="typeUnit"
        :type="uploadType"
        @submitEditEmit="initTable"
      ></AssayFill>
    </el-scrollbar>
  </el-dialog>
</template>

<script setup>
import { onMounted, ref, computed, watch } from "vue";
import moment from "moment";
import standardLine from "./standardLine.js";
import dataListHttp from "@/https/dataList.js";
import ChartLineBar from "../charts/ChartLineBar.vue";
import Storage from "@/utils/storage.js"; // storage工具类，简单的封装
import UploadFile from "./upload.vue";
import AssayFill from "./assayFill.vue";
import { ElMessage, ElMessageBox } from "element-plus";
const dateStartTime = ref(moment().startOf("month").format("YYYY-MM-DD"));
const dateEndTime = ref(moment().add(-1, "day").format("YYYY-MM-DD"));
const disabledDate1 = ref((time) => {
  return time.getTime() > Date.now();
});
const disabledDate2 = ref((time) => {
  return (
    time.getTime() < moment(dateStartTime.value) || time.getTime() > Date.now()
  );
});
// const timeDate = ref([moment().startOf('month').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')])
const currentYear = ref(moment().format("YYYY"));
const localTypeUnit = ref(Storage.localGet("depId"));
const typeUnit = ref(Storage.localGet("depId"));
if (localTypeUnit.value == "1") {
  typeUnit.value = "2";
}
const username = ref(Storage.localGet("username"));
const uploadVisible = ref(false);
const fillingVisible = ref(false);
const uploadType = ref("1");
const dialogTitle = ref("");
const input = ref();
const input2 = ref();
const assayChart = ref(null);
const chartListCompale = ref([]);
const options = ref([
  // { label: '全部', value: '1' },
  { label: "星沙厂", value: "2" },
  { label: "城西厂", value: "3" },
  { label: "城北厂", value: "4" },
  { label: "城南厂", value: "5" },
]);
const hHeight = ref(0);
const wWidth = ref(0);
const tableItemWidth = ref(0);
const option = ref({});
const chartTypeModel = ref("treatedWaterQuantity");
const chartTypeList = ref([]);
watch(chartTypeModel, () => {
  let compType =
    typeUnit.value == "2"
      ? "xingsha"
      : typeUnit.value == "3"
      ? "west"
      : typeUnit.value == "4"
      ? "north"
      : typeUnit.value == "5"
      ? "south"
      : "";
  input.value = standardLine[compType][chartTypeModel.value][0];
  input2.value = standardLine[compType][chartTypeModel.value][1];
});

const chartTypeItem = ref([
  {
    type: "line",
    code: "treatedWaterQuantity",
    name: "处理水量",
    linerColor: ["#b5bfd8", "#b5bfd8"],
  },
]);

const chartType = ref([]);
const chartTypeModelChange = (item, label) => {
  console.log(item, label);
  let idx = chartTypeList.value.findIndex((t) => {
    return t.value == item;
  });
  console.log(idx);
  chartTypeItem.value[0] = chartType.value[idx];
};
const unit = ref(["单位:mg/L"]);
const chartList = ref([]);
const uploadInitDataList = ref([]);
const uploadDataList = ref([]);

onMounted(() => {
  // nextTick(() => {
  hHeight.value = document.documentElement.clientHeight - 350;
  wWidth.value = document.documentElement.clientWidth - 296;
  // })
  initTable();
});
const initDate = ref([]);
const initTable = () => {
  fillingVisible.value = false;
  console.log(11111111111);
  initDate.value = [];
  resultList.value = [];
  // 计算选中日期相隔天数
  let startTime = moment(dateStartTime.value);
  let endTime = moment(dateEndTime.value);
  let tableDay = endTime.diff(startTime, "day");
  if (tableDay <= 31) {
    tableItemWidth.value = wWidth.value / (tableDay + 10);
  } else {
    tableItemWidth.value = wWidth.value / 41;
  }
  for (let i = 0; i <= tableDay; i++) {
    initDate.value.push(
      moment(dateStartTime.value).add(i, "day").format("MM-DD")
    );
    resultList.value.push({
      date: moment(dateStartTime.value).add(i, "day").format("MM-DD"),
      treatedWaterQuantity: "",
      overflowsSewage: "",
      waterTemperature: "",
      bodIn: "",
      bodOut: "",
      phIn: "",
      phOut: "",
      codIn: "",
      codOut: "",
      ssIn: "",
      ssOut: "",
      tnIn: "",
      tnOut: "",
      tpIn: "",
      tpOut: "",
      nhNIn: "",
      nhNOut: "",
      cufOut: "",
    });
  }
  // typeUnitLabel();
  getWaterDateList();
};
const getWaterDateList = () => {
  let params = {
    depId: typeUnit.value,
    // "depId": 4,
    startTime: moment(dateStartTime.value).format("YYYY-MM-DD 00:00:00"),
    endTime: moment(dateEndTime.value).format("YYYY-MM-DD 23:59:59"),
    auditStatus: "1",
  };
  dataListHttp.queryAssay(params).then((res) => {
    console.log(res);
    for (let key in res.data.data) {
      if (initDate.value.includes(key)) {
        let idx = initDate.value.findIndex((item) => {
          return item === key;
        });
        resultList.value[idx] = res.data.data[key];
      }
    }
    uploadDataList.value = JSON.parse(JSON.stringify(resultList.value));
    uploadInitDataList.value = JSON.parse(JSON.stringify(resultList.value));
    chartList.value = uploadInitDataList.value;

    getWaterOtherDateList();
  });
};
const getWaterOtherDateList = () => {
  let params = {
    depId: typeUnit.value,
    // "depId": 4,
    startTime: moment(dateStartTime.value).format("YYYY-MM-DD 00:00:00"),
    endTime: moment(dateEndTime.value).format("YYYY-MM-DD 23:59:59"),
  };
  dataListHttp.queryAssayCalculate(params).then((res) => {
    console.log(res);
    if (Object.keys(res.data.data).length == 0) {
      res.data.data.avg = {};
      res.data.data.max = {};
      res.data.data.min = {};
      res.data.data.total = {};
    }
    for (let key in res.data.data) {
      if (key == "avg") {
        res.data.data[key].date = "平均值";
      }
      if (key == "max") {
        res.data.data[key].date = "最大值";
      }
      if (key == "min") {
        res.data.data[key].date = "最小值";
      }
      if (key == "total") {
        for (let t in res.data.data[key]) {
          if (t != "treatedWaterQuantity") {
            res.data.data[key][t] = "-";
          }
        }
        res.data.data[key].date = "累计值";
      }
      if (key == "avg" || key == "max" || key == "min" || key == "total") {
        resultList.value.push(res.data.data[key]);
      }
    }
    getWaterOtherOtherDateList();
  });
};
const getWaterOtherOtherDateList = () => {
  let params = {
    // "depId": 4,
    depId: typeUnit.value,
    startTime: moment(dateStartTime.value).format("YYYY-MM-DD 00:00:00"),
    endTime: moment(dateEndTime.value).format("YYYY-MM-DD 23:59:59"),
  };
  dataListHttp.queryAssayRemove(params).then((res) => {
    console.log(res);
    for (let key in res.data.data) {
      res.data.data[key].bodOut = res.data.data[key].bodIn;
      res.data.data[key].codOut = res.data.data[key].codIn;
      res.data.data[key].nhNOut = res.data.data[key].nhNIn;
      res.data.data[key].ssOut = res.data.data[key].ssIn;
      res.data.data[key].tnOut = res.data.data[key].tnIn;
      res.data.data[key].tpOut = res.data.data[key].tpIn;
      if (key == "amountOfYear") {
        res.data.data[key].date = "年去除量";
      }
      if (key == "removalAmount") {
        res.data.data[key].date = "去除量";
      }
      if (key == "removeRate") {
        res.data.data[key].date = "去除率(%)";
      }
      if (
        key == "amountOfYear" ||
        key == "removalAmount" ||
        key == "removeRate"
      ) {
        resultList.value.push(res.data.data[key]);
      }
    }
  });
};
const identifyResultList = ref([]);
const headersList = ref([]);
const typeUnitLabel = () => {
  if (typeUnit.value == "2") {
    identifyResultList.value = [
      { title: "日期", label: "rq" },
      { title: "处理水量(m³)", label: "treatedWaterQuantity" },
      { title: "外溢雨污水量(m³)", label: "overflowsSewage" },
      { title: "水温(°C)", label: "waterTemperature" },
      { title: "PH", label: "phIn" },
      { title: "PH", label: "phOut" },
      { title: "SS(mg/L)", label: "ssIn" },
      { title: "SS(mg/L)", label: "ssOut" },
      { title: "COD(mg/L)", label: "codIn" },
      { title: "COD(mg/L)", label: "codOut" },
      { title: "BOD5(mg/L)", label: "bodIn" },
      { title: "BOD5(mg/L)", label: "bodOut" },
      { title: "TN(mg/L)", label: "tnIn" },
      { title: "TN(mg/L)", label: "tnOut" },
      { title: "NH3-N(mg/L)", label: "nhNIn" },
      { title: "NH3-N(mg/L)", label: "nhNOut" },
      { title: "TP(mg/L)", label: "tpIn" },
      { title: "TP(mg/L)", label: "tpOut" },
      { title: "粪大肠菌群(个/L)", label: "cufOut" },
    ];
    headersList.value = [
      {
        prop: "date",
        label: "日期",
      },
      {
        prop: "treatedWaterQuantity",
        label: "处理水量",
      },
      {
        prop: "overflowsSewage",
        label: "外溢雨污水量",
      },
      {
        prop: "waterTemperature",
        label: "水温",
      },
      {
        prop: "phIn",
        label: "进水",
      },
      {
        prop: "phOut",
        label: "出水",
      },
      {
        prop: "ssIn",
        label: "进水",
      },
      {
        prop: "ssOut",
        label: "出水",
      },
      {
        prop: "codIn",
        label: "进水",
      },
      {
        prop: "codOut",
        label: "出水",
      },
      {
        prop: "bodIn",
        label: "进水",
      },
      {
        prop: "bodOut",
        label: "出水",
      },
      {
        prop: "tnIn",
        label: "进水",
      },
      {
        prop: "tnOut",
        label: "出水",
      },
      {
        prop: "nhNIn",
        label: "进水",
      },
      {
        prop: "nhNOut",
        label: "出水",
      },
      {
        prop: "tpIn",
        label: "进水",
      },
      {
        prop: "tpOut",
        label: "出水",
      },
      {
        prop: "cufOut",
        label: "粪大肠菌群",
      },
    ];
    chartType.value = [
      {
        type: "line",
        code: "treatedWaterQuantity",
        name: "处理水量",
        linerColor: ["#b5bfd8", "#b5bfd8"],
      },
      {
        type: "line",
        code: "overflowsSewage",
        name: "外溢雨污水量",
        linerColor: ["#b5bfd8", "#b5bfd8"],
      },
      {
        type: "line",
        code: "waterTemperature",
        name: "水温",
        linerColor: ["#3ea7ea", "#3ea7ea"],
      },
      {
        type: "line",
        code: "phIn",
        name: "PH进水",
        linerColor: ["#bdf5e8", "#bdf5e8"],
      },
      {
        type: "line",
        code: "phOut",
        name: "PH出水",
        linerColor: ["#9cf7b4", "#9cf7b4"],
      },
      {
        type: "line",
        code: "ssIn",
        name: "SS进水",
        linerColor: ["#76da91", "#76da91"],
      },
      {
        type: "line",
        code: "ssOut",
        name: "SS出水",
        linerColor: ["#63b2ee", "#63b2ee"],
      },
      {
        type: "line",
        code: "codIn",
        name: "COD进水",
        linerColor: ["#f89588", "#f89588"],
      },
      {
        type: "line",
        code: "codOut",
        name: "COD出水",
        linerColor: ["#f8cb7f", "#f8cb7f"],
      },
      {
        type: "line",
        code: "bodIn",
        name: "BOD5进水",
        linerColor: ["#7898e1", "#7898e1"],
      },
      {
        type: "line",
        code: "bodOut",
        name: "BOD5出水",
        linerColor: ["#7cd6cf", "#7cd6cf"],
      },
      {
        type: "line",
        code: "tnIn",
        name: "TN进水",
        linerColor: ["#eddd86", "#eddd86"],
      },
      {
        type: "line",
        code: "tnOut",
        name: "TN出水",
        linerColor: ["#efa666", "#efa666"],
      },
      {
        type: "line",
        code: "nhNIn",
        name: "NH3-N进水",
        linerColor: ["#63b2ee", "#63b2ee"],
      },
      {
        type: "line",
        code: "nhNOut",
        name: "NH3-N出水",
        linerColor: ["#9987ce", "#9987ce"],
      },
      {
        type: "line",
        code: "tpIn",
        name: "TP进水",
        linerColor: ["#9192ab", "#9192ab"],
      },
      {
        type: "line",
        code: "tpOut",
        name: "TP出水",
        linerColor: ["#76da91", "#76da91"],
      },
      {
        type: "line",
        code: "cufOut",
        name: "粪大肠菌群",
        linerColor: ["#89caf2", "#89caf2"],
      },
    ];
    chartTypeList.value = [
      { label: "处理水量(m³)", value: "treatedWaterQuantity", idx: 0 },
      { label: "外溢雨污水量(m³)", value: "overflowsSewage", idx: 1 },
      { label: "水温(°C)", value: "waterTemperature", idx: 2 },
      { label: "PH进水", value: "phIn", idx: 2 },
      { label: "PH出水", value: "phOut", idx: 3 },
      { label: "SS进水(mg/L)", value: "ssIn", idx: 4 },
      { label: "SS出水(mg/L)", value: "ssOut", idx: 5 },
      { label: "COD进水(mg/L)", value: "codIn", idx: 6 },
      { label: "COD出水(mg/L)", value: "codOut", idx: 7 },
      { label: "BOD5进水(mg/L)", value: "bodIn", idx: 8 },
      { label: "BOD5出水(mg/L)", value: "bodOut", idx: 9 },
      { label: "TN进水(mg/L)", value: "tnIn", idx: 10 },
      { label: "TN出水(mg/L)", value: "tnOut", idx: 11 },
      { label: "NH3-N进水(mg/L)", value: "nhNIn", idx: 12 },
      { label: "NH3-N出水(mg/L)", value: "nhNOut", idx: 13 },
      { label: "TP进水(mg/L)", value: "tpIn", idx: 14 },
      { label: "TP出水(mg/L)", value: "tpOut", idx: 15 },
      { label: "粪大肠菌群(个/L)", value: "cufOut", idx: 16 },
    ];
  } else {
    identifyResultList.value = [
      { title: "日期", label: "rq" },
      { title: "处理水量(m³)", label: "treatedWaterQuantity" },
      { title: "水温(°C)", label: "waterTemperature" },
      { title: "PH", label: "phIn" },
      { title: "PH", label: "phOut" },
      { title: "SS(mg/L)", label: "ssIn" },
      { title: "SS(mg/L)", label: "ssOut" },
      { title: "COD(mg/L)", label: "codIn" },
      { title: "COD(mg/L)", label: "codOut" },
      { title: "BOD5(mg/L)", label: "bodIn" },
      { title: "BOD5(mg/L)", label: "bodOut" },
      { title: "TN(mg/L)", label: "tnIn" },
      { title: "TN(mg/L)", label: "tnOut" },
      { title: "NH3-N(mg/L)", label: "nhNIn" },
      { title: "NH3-N(mg/L)", label: "nhNOut" },
      { title: "TP(mg/L)", label: "tpIn" },
      { title: "TP(mg/L)", label: "tpOut" },
      { title: "粪大肠菌群(个/L)", label: "cufOut" },
    ];
    headersList.value = [
      {
        prop: "date",
        label: "日期",
      },
      {
        prop: "treatedWaterQuantity",
        label: "处理水量",
      },
      {
        prop: "waterTemperature",
        label: "水温",
      },
      {
        prop: "phIn",
        label: "进水",
      },
      {
        prop: "phOut",
        label: "出水",
      },
      {
        prop: "ssIn",
        label: "进水",
      },
      {
        prop: "ssOut",
        label: "出水",
      },
      {
        prop: "codIn",
        label: "进水",
      },
      {
        prop: "codOut",
        label: "出水",
      },
      {
        prop: "bodIn",
        label: "进水",
      },
      {
        prop: "bodOut",
        label: "出水",
      },
      {
        prop: "tnIn",
        label: "进水",
      },
      {
        prop: "tnOut",
        label: "出水",
      },
      {
        prop: "nhNIn",
        label: "进水",
      },
      {
        prop: "nhNOut",
        label: "出水",
      },
      {
        prop: "tpIn",
        label: "进水",
      },
      {
        prop: "tpOut",
        label: "出水",
      },
      {
        prop: "cufOut",
        label: "粪大肠菌群",
      },
    ];
    chartType.value = [
      {
        type: "line",
        code: "treatedWaterQuantity",
        name: "处理水量",
        linerColor: ["#b5bfd8", "#b5bfd8"],
      },
      {
        type: "line",
        code: "waterTemperature",
        name: "水温",
        linerColor: ["#3ea7ea", "#3ea7ea"],
      },
      {
        type: "line",
        code: "phIn",
        name: "PH进水",
        linerColor: ["#bdf5e8", "#bdf5e8"],
      },
      {
        type: "line",
        code: "phOut",
        name: "PH出水",
        linerColor: ["#9cf7b4", "#9cf7b4"],
      },
      {
        type: "line",
        code: "ssIn",
        name: "SS进水",
        linerColor: ["#76da91", "#76da91"],
      },
      {
        type: "line",
        code: "ssOut",
        name: "SS出水",
        linerColor: ["#63b2ee", "#63b2ee"],
      },
      {
        type: "line",
        code: "codIn",
        name: "COD进水",
        linerColor: ["#f89588", "#f89588"],
      },
      {
        type: "line",
        code: "codOut",
        name: "COD出水",
        linerColor: ["#f8cb7f", "#f8cb7f"],
      },
      {
        type: "line",
        code: "bodIn",
        name: "BOD5进水",
        linerColor: ["#7898e1", "#7898e1"],
      },
      {
        type: "line",
        code: "bodOut",
        name: "BOD5出水",
        linerColor: ["#7cd6cf", "#7cd6cf"],
      },
      {
        type: "line",
        code: "tnIn",
        name: "TN进水",
        linerColor: ["#eddd86", "#eddd86"],
      },
      {
        type: "line",
        code: "tnOut",
        name: "TN出水",
        linerColor: ["#efa666", "#efa666"],
      },
      {
        type: "line",
        code: "nhNIn",
        name: "NH3-N进水",
        linerColor: ["#63b2ee", "#63b2ee"],
      },
      {
        type: "line",
        code: "nhNOut",
        name: "NH3-N出水",
        linerColor: ["#9987ce", "#9987ce"],
      },
      {
        type: "line",
        code: "tpIn",
        name: "TP进水",
        linerColor: ["#9192ab", "#9192ab"],
      },
      {
        type: "line",
        code: "tpOut",
        name: "TP出水",
        linerColor: ["#76da91", "#76da91"],
      },
      {
        type: "line",
        code: "cufOut",
        name: "粪大肠菌群",
        linerColor: ["#89caf2", "#89caf2"],
      },
    ];
    chartTypeList.value = [
      { label: "处理水量(m³)", value: "treatedWaterQuantity", idx: 0 },
      { label: "水温(°C)", value: "waterTemperature", idx: 1 },
      { label: "PH进水", value: "phIn", idx: 2 },
      { label: "PH出水", value: "phOut", idx: 3 },
      { label: "SS进水(mg/L)", value: "ssIn", idx: 4 },
      { label: "SS出水(mg/L)", value: "ssOut", idx: 5 },
      { label: "COD进水(mg/L)", value: "codIn", idx: 6 },
      { label: "COD出水(mg/L)", value: "codOut", idx: 7 },
      { label: "BOD5进水(mg/L)", value: "bodIn", idx: 8 },
      { label: "BOD5出水(mg/L)", value: "bodOut", idx: 9 },
      { label: "TN进水(mg/L)", value: "tnIn", idx: 10 },
      { label: "TN出水(mg/L)", value: "tnOut", idx: 11 },
      { label: "NH3-N进水(mg/L)", value: "nhNIn", idx: 12 },
      { label: "NH3-N出水(mg/L)", value: "nhNOut", idx: 13 },
      { label: "TP进水(mg/L)", value: "tpIn", idx: 14 },
      { label: "TP出水(mg/L)", value: "tpOut", idx: 15 },
      { label: "粪大肠菌群(个/L)", value: "cufOut", idx: 16 },
    ];
  }
};

typeUnitLabel();
watch(typeUnit, () => {
  typeUnitLabel();
});
const resultList = ref([]);

const getUnitTypeName = computed(() => {
  return typeUnit.value == 1
    ? "总公司"
    : typeUnit.value == 2
    ? "星沙厂"
    : typeUnit.value == 3
    ? "城西厂"
    : typeUnit.value == 4
    ? "城北厂"
    : typeUnit.value == 4
    ? "城南厂"
    : "";
});
const getHeaders = computed(() => {
  return resultList.value.reduce(
    (pre, cur, index) => pre.concat(`value${index}`),
    ["title"]
  );
});
const getValues = computed(() => {
  return headersList.value.map((item) => {
    return resultList.value.reduce(
      (pre, cur, index) =>
        Object.assign(pre, { ["value" + index]: cur[item.prop] }),
      { title: item.label }
    );
  });
});
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  let len = resultList.value.length;
  if (typeUnit.value == "2") {
    if (
      rowIndex === 0 ||
      rowIndex === 1 ||
      rowIndex === 2 ||
      rowIndex === 3 ||
      rowIndex === 18
    ) {
      if (columnIndex === 0) {
        return [1, 2];
      } else if (
        columnIndex === len - 1 ||
        columnIndex === len ||
        columnIndex === len + 1
      ) {
        return [1, 1];
      } else if (columnIndex === 1) {
        return [0, 0];
      }
    }
    if (
      columnIndex === 0 ||
      columnIndex == len - 1 ||
      columnIndex == len ||
      columnIndex == len + 1
    ) {
      if (rowIndex == 1 || rowIndex == 2 || rowIndex == 2) {
      } else if (rowIndex === 4) {
        return {
          rowspan: 2,
          colspan: 1,
        };
      } else if (rowIndex === 6) {
        return {
          rowspan: 2,
          colspan: 1,
        };
      } else if (rowIndex === 8) {
        return {
          rowspan: 2,
          colspan: 1,
        };
      } else if (rowIndex === 10) {
        return {
          rowspan: 2,
          colspan: 1,
        };
      } else if (rowIndex === 12) {
        return {
          rowspan: 2,
          colspan: 1,
        };
      } else if (rowIndex === 14) {
        return {
          rowspan: 2,
          colspan: 1,
        };
      } else if (rowIndex === 16) {
        return {
          rowspan: 2,
          colspan: 1,
        };
      } else {
        return {
          rowspan: 0,
          colspan: 0,
        };
      }
    }
  } else {
    if (rowIndex === 0 || rowIndex === 1 || rowIndex === 2 || rowIndex === 17) {
      if (columnIndex === 0) {
        return [1, 2];
      } else if (
        columnIndex === len - 1 ||
        columnIndex === len ||
        columnIndex === len + 1
      ) {
        return [1, 1];
      } else if (columnIndex === 1) {
        return [0, 0];
      }
    }
    if (
      columnIndex === 0 ||
      columnIndex == len - 1 ||
      columnIndex == len ||
      columnIndex == len + 1
    ) {
      if (rowIndex == 1 || rowIndex == 2) {
      } else if (rowIndex === 3) {
        return {
          rowspan: 2,
          colspan: 1,
        };
      } else if (rowIndex === 5) {
        return {
          rowspan: 2,
          colspan: 1,
        };
      } else if (rowIndex === 7) {
        return {
          rowspan: 2,
          colspan: 1,
        };
      } else if (rowIndex === 9) {
        return {
          rowspan: 2,
          colspan: 1,
        };
      } else if (rowIndex === 11) {
        return {
          rowspan: 2,
          colspan: 1,
        };
      } else if (rowIndex === 13) {
        return {
          rowspan: 2,
          colspan: 1,
        };
      } else if (rowIndex === 15) {
        return {
          rowspan: 2,
          colspan: 1,
        };
      } else {
        return {
          rowspan: 0,
          colspan: 0,
        };
      }
    }
  }
};
const search = () => {
  initTable();
};

const blurFn = (row, column, item) => {
  console.log(row, column);
  uploadDataList.value[row - 1][identifyResultList.value[column].label] = item;
  console.log(uploadDataList.value);
};

const focusFn = (row, column) => {
  window.addEventListener(
    "paste",
    (event) => {
      event = event || window.event;
      const clipdata = event.clipboardData || window.clipboardData;
      const value = clipdata.getData("text/plain");
      console.log(value);

      let clipboardList = value.split("\r\n");
      clipboardList.forEach((item, ind) => {
        let itemList = item.split("\t");
        clipboardList[ind] = itemList;
      });
      setTimeout(() => {
        console.log("1111", clipboardList);
        clipboardList.forEach((item, ind) => {
          item.forEach((n, m) => {
            console.log(
              row - 1 + m < uploadDataList.value.length,
              uploadDataList.value.length
            );
            if (row - 1 + m < uploadDataList.value.length) {
              resultList.value[row - 1 + m][
                identifyResultList.value[column + ind].label
              ] = n;
            }
          });
        });
      });
    },
    { once: true }
  );
};
const isNoEdit = () => {
  return false;
};

watch(
  uploadInitDataList,
  (newVal, oldVal) => {
    console.log("11111", newVal);
  },
  { deep: true }
);
watch(
  uploadDataList,
  (newVal, oldVal) => {
    console.log("222", newVal);
  },
  { deep: true }
);
const submitEdit = () => {
  setTimeout(() => {
    let compare1 = {
      obj: uploadInitDataList.value,
    };
    let compare2 = {
      obj: uploadDataList.value,
    };
    console.log(uploadInitDataList.value, uploadDataList.value);
    if (JSON.stringify(compare1) == JSON.stringify(compare2)) {
      ElMessage({
        message: "没有检测到数据修改",
        type: "warning",
      });
    } else {
      ElMessageBox.alert(`确认提交当前修改的数据吗？`, "提交修改", {
        // if you want to disable its autofocus
        // autofocus: false,
        confirmButtonText: "确认",
        callback: (action) => {
          let params = {
            dailyPOList: uploadDataList.value,
            username: username.value,
          };
          dataListHttp.entryDailyData(params).then((res) => {
            console.log(res);
            if (res.data.code == 200) {
              ElMessage({
                message: "提交成功",
                type: "success",
              });
              initTable();
            } else {
              ElMessage({
                message: "提交失败,请重新提交",
                type: "error",
              });
            }
          });
        },
      });
    }
  }, 100);
};
const resetEdit = () => {
  initTable();
};
const exportDataList = () => {
  let params = {
    // "depId": 4,
    depId: typeUnit.value,
    startTime: moment(dateStartTime.value).format("YYYY-MM-DD 00:00:00"),
    endTime: moment(dateEndTime.value).format("YYYY-MM-DD 23:59:59"),
  };
  dataListHttp.exportAssay(params).then((response) => {
    console.log(response);
    const content = response.data;
    const blob = new Blob([content], { type: "application/ms-excel" });
    let fileName = `化验数据.xls`;
    if ("download" in document.createElement("a")) {
      // 非IE下载
      const elink = document.createElement("a");
      elink.download = fileName;
      elink.style.display = "none";
      elink.href = URL.createObjectURL(blob);
      document.body.appendChild(elink);
      elink.click();
      URL.revokeObjectURL(elink.href); // 释放URL 对象
      document.body.removeChild(elink);
    } else {
      // IE10+下载
      navigator.msSaveBlob(blob, fileName);
    }
  });
};
const uploadFile = () => {
  uploadVisible.value = true;
  dialogTitle.value = "上传文件";
  uploadType.value = "1";
};
const filling = () => {
  fillingVisible.value = true;
  dialogTitle.value = "手工填报";
};
</script>

<style scoped lang="less">
.waterYield {
  background: #fff;
  height: 100%;
}

.filter {
  display: flex;
  align-items: center;
}

.uploadBtn {
  text-align: left;
  margin-bottom: 40rem;
  margin-right: 20rem;
}

.chart {
  margin-top: 60px;
  position: relative;

  .settingSta {
    position: absolute;
    right: 0;
  }
}

.unit {
  text-align: right;
  font-size: 14px;
  line-height: 2;
  padding-right: 40px;
  margin-top: -20px;
}
</style>
